const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        //output必须设置绝对路径,所以这里导入path模块
        path: path.resolve(__dirname, 'dist'),
        //静态资源加载例如图片加载需要配置路径
        publicPath: "./dist/",
        //通过asset配置资源
        //assetModuleFilename: "img/[name].[hash:4][ext]"
    },
    module: {
        rules: [{
                //简写方式
                test: /\.css$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上,因为兼容性处理要在css调用之前，所以需要将postcss-loader的配置放在css-loader右边
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        // 往前找一个,即追回到postcss-loader
                        importLoaders: 1,
                        esModule: false
                    }
                }, 'postcss-loader']
            },
            {
                //简写方式
                test: /\.less$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            },
            // {
            //     test: /\.(png|svg|gif|jpe?g)$/,
            //     //修改file-loader配置的写法
            //     // use: [{
            //     //     loader: 'url-loader',
            //     //     options: {
            //     //         //哈希截取，让图片的名字变短
            //     //         // name: '[name].[hash:6].[ext]',
            //     //         // //在dist下面创建img目录
            //     //         // outputPath: 'img'
            //     //         //一般不用outputPath而是直接在name里面加img/
            //     //         name: 'img/[name].[hash:6].[ext]',
            //     //         limit: 25 * 1024
            //     //     }
            //     // }]
            //     //设置资源目录
            //     type: 'asset/resource',
            //     generator: {
            //         filename: "img/[name].[hash:4][ext]",
            //     }
            // }

            // {
            //     test: /\.(png|svg|gif|jpe?g)$/,
            //     //设置资源目录
            //     type: 'asset/inline',
            // }
            {
                test: /\.(png|svg|gif|jpe?g)$/,
                //设置资源目录
                type: 'asset',
                generator: {
                    filename: "img/[name].[hash:4][ext]",
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024
                    }
                }
            }
        ]
    },
    //在里面放入具体的插件
    plugins: [
        new CleanWebpackPlugin(),
        //生成html文件的插件
        new HtmlWebpackPlugin({
            //为生成的html添加内容
            title: "index.html",
            template: './public/index.html'
        })
    ]
}

/**
 * 1.url-loader 以base64 的方式添加到文件当中，减少请求次数
 * 2.file-loader 将资源拷贝到指定的目录，分开请求
 * 3.url-loader 内部其实也可以调用file-loader
 * 4.limit 字段：超过数值做拷贝，没有超过只需要调用
 *  
 */